<template>
  <div class="card">
    <!-- 第一产业（农业） -->
    <div class="mb-3">
      <h3 class="text-md font-semibold bg-blue-100 p-2 mb-2">第一产业（农业）</h3>
      <div class="bg-blue-50 p-4">
        <p class="text-sm">农林牧渔业总产值</p>
        <div class="flex justify-between mb-2">
          <div class="text-1xl font-bold">
            <span>总值</span>
            <p class="text-2xl font-bold text-blue-800">
              {{ resList[props.yearStr].agriculture_currentValue }}<span class="unit">亿元</span>
            </p>
          </div>
          <div class="text-1xl font-bold">
            <span>增速</span>
            <p class="text-2xl font-bold text-blue-800">
              {{ resList[props.yearStr].agriculture_growthRate }}<span class="unit">%</span>
            </p>
          </div>
          <div class="text-1xl font-bold">
            <span>兵团排名</span>
            <p class="text-2xl font-bold text-blue-800">NO.10</p>
          </div>
        </div>
        <!-- 进度条 -->
        <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
          <div
            class="bg-blue-600 h-4 rounded-full flex items-center justify-end"
            :style="{
              width:
                (resList[props.yearStr].agriculture_currentValue /
                  resList[props.yearStr].agriculture_targetValue) *
                  100 +
                '%',
            }"
          >
            <span class="text-xs text-white px-2">
              {{
                (
                  (resList[props.yearStr].agriculture_currentValue /
                    resList[props.yearStr].agriculture_targetValue) *
                  100
                ).toFixed(1)
              }}%
            </span>
          </div>
        </div>
        <p class="text-sm text-blue-800">
          目标值: {{ resList[props.yearStr].agriculture_targetValue }}亿元
        </p>
      </div>
    </div>

    <!-- 第二产业（工业与建筑业） -->
    <div class="mb-3">
      <h3 class="text-md font-semibold bg-green-100 p-2 mb-2">第二产业（工业与建筑业）</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-green-50 p-4">
          <p class="text-sm">规模以上工业总产值</p>
          <div class="flex justify-between mb-2">
            <div class="text-1xl font-bold">
              <span>总值</span>
              <p class="text-1xl font-bold text-green-800">
                {{ resList[props.yearStr].industry_currentValue }}<span class="unit">亿元</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>增速</span>
              <p class="text-1xl font-bold text-green-800">
                {{ resList[props.yearStr].industry_growthRate }}<span class="unit">%</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>兵团排名</span>
              <p class="text-1xl font-bold text-green-800">NO.6</p>
            </div>
          </div>
          <!-- 进度条 -->
          <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
            <div
              class="bg-green-600 h-4 rounded-full flex items-center justify-end"
              :style="{
                width:
                  (resList[props.yearStr].industry_currentValue /
                    resList[props.yearStr].industry_targetValue) *
                    100 +
                  '%',
              }"
            >
              <span class="text-xs text-white px-2">
                {{
                  (
                    (resList[props.yearStr].industry_currentValue /
                      resList[props.yearStr].industry_targetValue) *
                    100
                  ).toFixed(1)
                }}%
              </span>
            </div>
          </div>
          <p class="text-sm text-green-800">
            目标值: {{ resList[props.yearStr].industry_targetValue }}亿元
          </p>
        </div>

        <div class="bg-green-50 p-4">
          <p class="text-sm">建筑业总产值</p>
          <div class="flex justify-between mb-2">
            <div class="text-1xl font-bold">
              <span>总值</span>
              <p class="text-1xl font-bold text-green-800">
                {{ resList[props.yearStr].construction_currentValue }}<span class="unit">亿元</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>增速</span>
              <p class="text-1xl font-bold text-green-800">
                {{ resList[props.yearStr].construction_growthRate }}<span class="unit">%</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>兵团排名</span>
              <p class="text-1xl font-bold text-green-800">NO.7</p>
            </div>
          </div>
          <!-- 进度条 -->
          <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
            <div
              class="bg-green-600 h-4 rounded-full flex items-center justify-end"
              :style="{
                width:
                  (resList[props.yearStr].construction_currentValue /
                    resList[props.yearStr].construction_targetValue) *
                    100 +
                  '%',
              }"
            >
              <span class="text-xs text-white px-2">
                {{
                  (
                    (resList[props.yearStr].construction_currentValue /
                      resList[props.yearStr].construction_targetValue) *
                    100
                  ).toFixed(1)
                }}%
              </span>
            </div>
          </div>
          <p class="text-sm text-green-800">
            目标值: {{ resList[props.yearStr].construction_targetValue }}亿元
          </p>
        </div>
      </div>
    </div>

    <!-- 第三产业（服务业） -->
    <div>
      <h3 class="text-md font-semibold bg-purple-100 p-2 mb-2">第三产业（服务业）</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-purple-50 p-4">
          <p class="text-sm">规上营利性服务业营收</p>
          <div class="flex justify-between mb-2">
            <div class="text-1xl font-bold">
              <span>总值</span>
              <p class="text-1xl font-bold text-purple-800">
                {{ resList[props.yearStr].serviceProfit_currentValue
                }}<span class="unit">亿元</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>增速</span>
              <p class="text-1xl font-bold text-purple-800">
                {{ resList[props.yearStr].serviceProfit_growthRate }}<span class="unit">%</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>兵团排名</span>
              <p class="text-1xl font-bold text-purple-800">NO.8</p>
            </div>
          </div>
          <!-- 进度条 -->
          <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
            <div
              class="bg-purple-600 h-4 rounded-full flex items-center justify-end"
              :style="{
                width:
                  (resList[props.yearStr].serviceProfit_currentValue /
                    resList[props.yearStr].serviceProfit_targetValue) *
                    100 +
                  '%',
              }"
            >
              <span class="text-xs text-white px-2">
                {{
                  (
                    (resList[props.yearStr].serviceProfit_currentValue /
                      resList[props.yearStr].serviceProfit_targetValue) *
                    100
                  ).toFixed(1)
                }}%
              </span>
            </div>
          </div>
          <p class="text-sm text-purple-800">
            目标值: {{ resList[props.yearStr].serviceProfit_targetValue }}亿元
          </p>
        </div>

        <div class="bg-purple-50 p-4">
          <p class="text-sm">非营利性服务业工资总额</p>
          <div class="flex justify-between mb-2">
            <div class="text-1xl font-bold">
              <span>总值</span>
              <p class="text-1xl font-bold text-purple-800">
                {{ resList[props.yearStr].serviceNonProfit_currentValue
                }}<span class="unit">亿元</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>增速</span>
              <p class="text-1xl font-bold text-purple-800">
                {{ resList[props.yearStr].serviceNonProfit_growthRate }}<span class="unit">%</span>
              </p>
            </div>
            <div class="text-1xl font-bold">
              <span>兵团排名</span>
              <p class="text-1xl font-bold text-purple-800">NO.9</p>
            </div>
          </div>
          <!-- 进度条 -->
          <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
            <div
              class="bg-purple-600 h-4 rounded-full flex items-center justify-end"
              :style="{
                width:
                  (resList[props.yearStr].serviceNonProfit_currentValue /
                    resList[props.yearStr].serviceNonProfit_targetValue) *
                    100 +
                  '%',
              }"
            >
              <span class="text-xs text-white px-2">
                {{
                  (
                    (resList[props.yearStr].serviceNonProfit_currentValue /
                      resList[props.yearStr].serviceNonProfit_targetValue) *
                    100
                  ).toFixed(1)
                }}%
              </span>
            </div>
          </div>
          <p class="text-sm text-purple-800">
            目标值: {{ resList[props.yearStr].serviceNonProfit_targetValue }}亿元
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
  yearStr: String,
})
let resList = ref({
  2024: {
    agriculture_currentValue: 4000,
    agriculture_targetValue: 4000,
    agriculture_growthRate: 6.9,
    industry_currentValue: 318,
    industry_targetValue: 200,
    industry_growthRate: 17.8,
    construction_currentValue: 5,
    construction_targetValue: 5,
    construction_growthRate: 4.0,
    serviceProfit_currentValue: 258,
    serviceProfit_targetValue: 300,
    serviceProfit_growthRate: 3.5,
    serviceNonProfit_currentValue: 747,
    serviceNonProfit_targetValue: 800,
    serviceNonProfit_growthRate: 7.6,
  },
  2023: {
    agriculture_currentValue: 4709,
    agriculture_targetValue: 4500,
    agriculture_growthRate: 4.9,
    industry_currentValue: 318,
    industry_targetValue: 300,
    industry_growthRate: 10.8,
    construction_currentValue: 5,
    construction_targetValue: 2,
    construction_growthRate: 3.0,
    serviceProfit_currentValue: 218,
    serviceProfit_targetValue: 200,
    serviceProfit_growthRate: 4.5,
    serviceNonProfit_currentValue: 947,
    serviceNonProfit_targetValue: 700,
    serviceNonProfit_growthRate: 6.6,
  },
  2022: {
    agriculture_currentValue: 3705,
    agriculture_targetValue: 4000,
    agriculture_growthRate: 5.9,
    industry_currentValue: 318,
    industry_targetValue: 300,
    industry_growthRate: 10.8,
    construction_currentValue: 6,
    construction_targetValue: 2,
    construction_growthRate: 2.0,
    serviceProfit_currentValue: 218,
    serviceProfit_targetValue: 200,
    serviceProfit_growthRate: 3.5,
    serviceNonProfit_currentValue: 525,
    serviceNonProfit_targetValue: 500,
    serviceNonProfit_growthRate: 6.6,
  },
  2021: {
    agriculture_currentValue: 4705,
    agriculture_targetValue: 5000,
    agriculture_growthRate: 8.9,
    industry_currentValue: 348,
    industry_targetValue: 400,
    industry_growthRate: 11.8,
    construction_currentValue: 3,
    construction_targetValue: 5,
    construction_growthRate: 4.0,
    serviceProfit_currentValue: 258,
    serviceProfit_targetValue: 300,
    serviceProfit_growthRate: 3.5,
    serviceNonProfit_currentValue: 747,
    serviceNonProfit_targetValue: 800,
    serviceNonProfit_growthRate: 7.6,
  },
  2020: {
    agriculture_currentValue: 4705,
    agriculture_targetValue: 5000,
    agriculture_growthRate: 8.9,
    industry_currentValue: 348,
    industry_targetValue: 400,
    industry_growthRate: 11.8,
    construction_currentValue: 3,
    construction_targetValue: 5,
    construction_growthRate: 4.0,
    serviceProfit_currentValue: 258,
    serviceProfit_targetValue: 300,
    serviceProfit_growthRate: 3.5,
    serviceNonProfit_currentValue: 747,
    serviceNonProfit_targetValue: 800,
    serviceNonProfit_growthRate: 7.6,
  },
})
</script>

<style scoped></style>
